<template>
    <div class="inbound">
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '24px 0'}">
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('/index')">首页</a></BreadcrumbItem>
          <BreadcrumbItem>财务管理</BreadcrumbItem>
          <BreadcrumbItem>仓库管理</BreadcrumbItem>
          <BreadcrumbItem>入库列表</BreadcrumbItem>
        </Breadcrumb>
        <Content id="tal" :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <div class="f-header" ghost>
            <div class="f-header-search">
              <span>搜索条件：</span>
                <DatePicker v-model="beginTime" type="date" placeholder="请选择开始时间..." style="width:30%"></DatePicker>
                <DatePicker v-model="endTime" type="date" placeholder="请选择结束时间..." style="width:30%"></DatePicker>
                <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
            </div>
            <Button @click="toRefresh"><Icon type="md-sync" />刷新</Button>
            <Button @click="addDrawer=true"><Icon type="md-add" />入库</Button>
            <Button type="primary" @click="toDown"><Icon type="md-download" />导出</Button>
          </div>
          <div class="f-content" style="width: 100%;height: 72vh;overflow: hidden;margin-top: 1%">
            <div style="overflow-y:scroll;width: 101.5%;height: 100%;margin-right: -20px">
              <Table :columns="tb_columns"  :height="666" :data="goodsRecord_list" size="small" ref="table">
              </Table>
              <Page :total="goodsRecord_total" :current="goodsRecord_current_page" :page-size="goodsRecord_page_size" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
            </div>
          </div>
        </Content>
      </Layout>
      <Drawer title="新增入库单" :closable="false" v-model="addDrawer" width="30" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="货物名称：" prop="goodsName">
            <Input v-model="addForm.goodsName" placeholder="请输入货物名称..."></Input>
          </FormItem>
          <FormItem label="材质：" prop="material">
            <Input v-model="addForm.material" placeholder="请输入材质..."></Input>
          </FormItem>
          <FormItem label="规格：" prop="specification">
            <Input v-model="addForm.specification" placeholder="请输入规格..."></Input>
          </FormItem>
          <FormItem label="供应商：" prop="supplier">
            <Input v-model="addForm.supplier" placeholder="请输入供应商..."></Input>
          </FormItem>
          <FormItem label="货物类型：" prop="goodsType">
            <Select v-model="addForm.goodsType" placeholder="请选择货物类型...">
              <Option value="原材料">原材料</Option>
              <Option value="半成品">半成品</Option>
              <Option value="成品">成品</Option>
            </Select>
          </FormItem>
          <FormItem v-if="addForm.goodsType==='半成品' || addForm.goodsType==='成品'" label="是否基于已有货物入库：">
            <RadioGroup v-model="xz">
              <Radio label="是">
                <span>是</span>
              </Radio>
              <Radio label="否">
                <span>否</span>
              </Radio>
            </RadioGroup>
          </FormItem>
          <FormItem v-if="xz==='是'" label="货物：">
              <Select v-model="goodsId" placeholder="请选择货物...">
                <Option v-for="(item,key) in goods_list" :key="key" :value="item.id">{{item.goodsName}}</Option>
              </Select>
          </FormItem>
          <FormItem v-if="xz==='是'" label="使用的数量：">
              <Input v-model="addForm.number" placeholder="请输入使用的数量..."></Input>
          </FormItem>
          <FormItem v-if="xz==='否'" label="数量：">
            <Input v-model="addForm.number" placeholder="请输入数量..."></Input>
          </FormItem>
          <FormItem label="交货人：" prop="deliverer">
            <Input v-model="addForm.deliverer" placeholder="请输入交货人姓名..."></Input>
          </FormItem>
          <FormItem label="单价：" prop="price">
            <Input v-model="addForm.price" placeholder="请输入单价..."></Input>
          </FormItem>
          <FormItem label="摘要：" prop="summary">
            <Input type="textarea" :rows="8" v-model="addForm.summary" placeholder="请输入摘要..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
    </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex';
  import {toGet,toPost} from "../../utils/MyAxios";
  import recordExpand from './record-expand.vue';
    export default {
        name: "inbound",
        data() {
            return {
              xz:'否',
              goodsId:'',
              goodsName:'',
              clientName:'',
              category:'入库',
              beginTime:'',
              endTime:'',
              loading:false,
              addForm:{},
              addDrawer:false,
              addRuleVal:{
                goodsName: [
                  { required: true, message: '请输入货物名称', trigger: 'blur' }
                ],
                material: [
                  { required: true, message: '请输入材质', trigger: 'blur' }
                ],
                specification: [
                  { required: true, message: '请输入规格', trigger: 'blur' }
                ],
                supplier: [
                  { required: true, message: '请输入供应商', trigger: 'blur' }
                ],
                goodsType: [
                  { required: true, message: '请选择货物类型', trigger: 'blur' }
                ],
                number: [
                  { required: true, message: '请输入数量', trigger: 'blur' }
                ],
                price: [
                  { required: true, message: '请输入单价', trigger: 'blur' }
                ],
                deliverer: [
                  { required: true, message: '请输入交货人姓名', trigger: 'blur' }
                ],
                summary: [
                  { required: true, message: '请输入摘要', trigger: 'blur' }
                ],
              },
              tb_columns: [
                {
                  type: 'expand',
                  width: 50,
                  render: (h, params) => {
                    return h(recordExpand, {
                      props: {
                        id: params.row.goodsId
                      }
                    })
                  }
                },
                {
                  title: '数量',
                  key: 'number',
                  align: 'center'
                },
                {
                  title: '交货人',
                  key: 'deliverer',
                  align: 'center'
                },
                {
                  title: '操作人',
                  key: 'operater',
                  align: 'center'
                },
                {
                  title: '操作时间',
                  key: 'operateTime',
                  align: 'center'
                },
                {
                  title: '摘要',
                  key: 'summary',
                  align: 'center'
                },
              ],
            }
        },
      computed: {
        ...mapGetters(['goods_list','goodsRecord_list','goodsRecord_total','goodsRecord_current_page','goodsRecord_page_size']),
      },
      methods: {
        ...mapActions(['getGoodsRecordList','getGoodsList']),
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
                this.loading=true;
                if(this.xz==='是'){
                  toGet('/finance-management/finance/goods/less/'+this.goodsId+'/'+this.addForm.number);
                }
                let params = {
                  goodsName:this.addForm.goodsName,
                  material:this.addForm.material,
                  specification:this.addForm.specification,
                  supplier:this.addForm.supplier,
                  goodsType:this.addForm.goodsType,
                  number:this.addForm.number,
                  price:this.addForm.price,
                  summary:this.addForm.summary,
                };
                toPost('/finance-management/finance/goods/add',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      let params2 = {
                        goodsId:res.data,
                        number:this.addForm.number,
                        category:'入库',
                        clientName:this.addForm.clientName,
                        deliverer:this.addForm.deliverer,
                        goodsName:this.addForm.goodsName,
                        material:this.addForm.material,
                        summary:this.addForm.summary,
                        operaterId:localStorage.getItem('userId'),
                        operater:localStorage.getItem('nickname'),
                      };
                      toPost('/finance-management/finance/record/inbound',params2)
                        .then(res=> {
                          if (res.resultCode === 0) {
                            this.$Notice.success({
                              title: '新增成功'
                            });
                            this.$refs[name].resetFields();
                            this.toRefresh();
                            this.addDrawer=false;
                          }else{
                            this.$Notice.error({
                              title: '新增失败',
                              desc: '服务器发生未知错误'
                            })
                          }
                        });
                    }else{
                      this.$Notice.error({
                        title: '新增失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  });
                this.loading=false;
            }
          })
        },
        handleReset (name) {
          this.addDrawer=false;
          this.$refs[name].resetFields();
        },
        toDown(){
          swal({
            title: "您确认导出入库记录表数据吗？",
            icon: "info",
            buttons: ["取消", "确认下载"],
          })
            .then((willDown) => {
              if (willDown) {
                if(this.goodsRecord_list.length>0){
                  this.$refs.table.exportCsv({
                    filename: '入库记录表('+this.formatDate(new Date().toDateString())+')'
                  });
                }else{
                  swal("无法导出!", "表格暂无数据!", "error");
                }
              }
            });
        },
        onChange(currentPage){
          this.getGoodsRecordList({
            'goodsName':this.goodsName,
            'clientName':'',
            'category':this.category,
            'beginTime':this.formatDate(this.beginTime),
            'endTime':this.formatDate(this.endTime),
            'currentPage':currentPage*1,
            'pageSize':this.goodsRecord_page_size
          });
        },
        toRefresh(){
          this.getGoodsRecordList({
            'goodsName':this.goodsName,
            'clientName':'',
            'category':this.category,
            'beginTime':this.formatDate(this.beginTime),
            'endTime':this.formatDate(this.endTime),
            'currentPage':this.goodsRecord_current_page,
            'pageSize':this.goodsRecord_page_size
          });
        },
        jump(e){
          this.$router.push(e);
        },
        onPageSizeChange(pageSize){
          this.getGoodsRecordList({
            'goodsName':this.goodsName,
            'clientName':'',
            'category':this.category,
            'beginTime':this.formatDate(this.beginTime),
            'endTime':this.formatDate(this.endTime),
            'currentPage':this.goodsRecord_current_page,
            'pageSize':pageSize*1
          });
        },
        toSearch(){
          this.getGoodsRecordList({
            'goodsName':this.goodsName,
            'clientName':'',
            'category':this.category,
            'beginTime':this.formatDate(this.beginTime),
            'endTime':this.formatDate(this.endTime),
            'currentPage':this.goodsRecord_current_page,
            'pageSize':this.goodsRecord_page_size
          });
        },
        formatDate(date){
          if(date){
            let time = new Date(date);
            return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
          }else{
            return '';
          }
        }
      },
      mounted() {
        this.getGoodsRecordList({
          'goodsName':this.goodsName,
          'clientName':'',
          'category':this.category,
          'beginTime':this.formatDate(this.beginTime),
          'endTime':this.formatDate(this.endTime),
          'currentPage':1,
          'pageSize':10
        });
        this.getGoodsList({
          'goodsName':'',
          'currentPage':1,
          'pageSize':999
        });
      },
    }
</script>

<style lang="css" scoped>
  .demo-drawer-footer{
    width: 100%;
    position: relative;
    bottom: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
